<template>
  <div class="error">
    <a-result title="404" subTitle="抱歉，您访问的页面消失了...">
      <template #icon>
        <a-image :src="errorImg" />
      </template>
      <template #extra>
        <a-button type="primary" @click="backHome" size="small" plain
          >返回控制台</a-button
        >
      </template>
    </a-result>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import nfImg from "@/assets/img/404.png";

export default {
  setup() {
    const router = useRouter();
    const errorImg = ref(nfImg);

    const backHome = () => {
      router.replace("/");
    };

    return { backHome, errorImg };
  },
};
</script>

<style lang="less" scoped>
.error {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
</style>
